<template>
  <div class="bg-gray">
    <b-container>
      <b-row>
        <b-col>
          <b-breadcrumb class="bg-gray bread-border">
            <b-breadcrumb-item to="/space">
              <b-icon icon="house-fill" scale="1.25" shift-v="1.25"/>
              个人空间
            </b-breadcrumb-item>
            <b-breadcrumb-item  active>
              <b-icon icon="list-ul" scale="1.25" shift-v="-1.25"/>
              收藏列表
            </b-breadcrumb-item>
          </b-breadcrumb>
        </b-col>
      </b-row>
      <b-row>
        <b-col cols="12" lg="6" class="mb-3" v-for="(item,index) in items">
          <div class="my-card py-3">
            <b-row class="mx-1" >
              <b-col cols="12" @click="$router.push('/item/'+item.itemid)">
                <b-row class="">
                  <b-col cols="12">
                    <p class="m-0">
                      <b-avatar
                          :variant="users[index].avatarcolor"
                          :src="gensrc(users[index].avatarpath)"
                          size="35px"
                      ></b-avatar>
                      <span class="ml-2 ">{{users[index].nickname}}</span>
                    </p>
                  </b-col>
                </b-row>
                <b-row class="mt-2">
                  <b-col cols="4">
                    <b-img :src="genimg(item.files[0].filename)" rounded fluid/>
                  </b-col>
                  <b-col cols="8" class="pl-0">
                    <h5>{{item.title}}</h5>
                    <p>
                      {{item.desc}}
                    </p>
                  </b-col>
                </b-row>
                <b-row>
                  <b-col class="mt-2">
                    <span class="price color-number">￥{{item.price}} </span>
                  </b-col>
                  <b-col cols="8" class="text-right mt-1">
                    <b-button variant="warning" class="mr-1 px-1" @click.stop="dismiss(index)">取消收藏</b-button>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
  import urlconfig from "../urlconfig";

  export default {
    name: "Favourite",
    data(){
      return{
        items:[],
        users:[],
      }
    },
    computed:{

    },
    methods:{
      gensrc(path){
        return urlconfig.baseUrl+urlconfig.avatarResource+path
      },
      genimg(path){
        return urlconfig.baseUrl+urlconfig.fileResources+path
      },
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      init(){
        this.$ajax.post('/item/listfav',{uuid:this.$store.state.uuid}).then(resp=>{
          let data = resp.data
          if (data.code ===200){
            this.items = data.data.items
            this.users = data.data.users
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast("请求失败",false)
        })
      },
      dismiss(index){
        this.$ajax.post('/item/delfav',{itemid:this.items[index].itemid,uuid:this.$store.state.uuid}).then(resp=>{
          let data = resp.data
          if (data.code ===200){
            this.makeToast(data.msg)
            this.items.splice(index,1)
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast("请求失败",false)
        })
      }
    },
    mounted() {
    this.init()
      }
  }
</script>

<style scoped>
  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }
  .price{
    font-size: 1.3em;
    font-weight: bold;
  }
</style>